<template>
	<view id="search-index">
		<view class="search">
			<view class="search-icon">
				<image src="../../static/images/message.png" mode=""></image>
			</view>
			<view class="search-input">
				<input type="text" value="" placeholder="智能积木 越野四驱车" @click="search" />
				<image src="../../static/images/search.png" mode=""></image>
			</view>
			<view class="search-scan">
				<image src="../../static/images/scanco.png" mode=""></image>
			</view>
		</view>
		<view class="category">
			<scroll-view scroll-x="true" enable-flex="true">
				<view class="scroll-row-item" :class="index==index2?'active':''" v-for="(item,index2) in categoryList"
					:key="item.id">
					{{item.name}}
				</view>

			</scroll-view>
		</view>
		<!-- 这是下面的一部分 -->
		<view class="uni-swiper-wrapper">
			<!-- 大的swiper -->

			<swiper class="uni-swiper-slide" @change="changeSort">

				<swiper-item>
					<scroll-view scroll-y="true" class="scr" refresher-enabled="true" :refresher-triggered="triggered"
						:refresher-threshold="50" @refresherpulling="onpulling" @refresherrestore="onRestore"
						@refresherrefresh="onRefresh" @scrolltolower="onBottom">
						<!-- 这里面是小的 -->
						<swiper class="uni-swiper-banner" :indicator-dots="true" :autoplay="true" :interval="3000"
							:duration="1000" circular="true">
							<swiper-item v-for="(item,index) in banner" :key="index">
								<view class="swiper-item">
									<image :src="item.src"></image>
									<!-- 	<view class="">
											{{item.data[index].src}}
										</view> -->
								</view>
							</swiper-item>

						</swiper>

						<!-- 这里第二部分 -->
						<!-- 下面的列表 -->
						<view class="sort-list">
							<view class="sort-list-icon" v-for="(item,index) in sortList" :key="index">
								<!-- 图片和文字 -->
								<image :src="item.src"></image>
								<text>{{item.text}}</text>
							</view>

						</view>

						<!-- 这个就是下面的两个单独比较大的图片 -->
						<view class="image-list">
							<view class="image-list-left">
								<!-- 左边图片 -->
								<!-- <image src="../../static/logo.png"></image> -->
								<image :src="imageList[0].src"></image>
							</view>
							<view class="image-list-right">
								<!-- 右边部分分成上下两半 -->
								<image :src="imageList[1].src"></image>
								<image :src="imageList[2].src"></image>
							</view>
						</view>

						<!-- 接下来就全是图片了 -->
						<view class="product-list">
							<view class="product-list-m" v-for="(item,index) in productList" :key="index">
								<!-- <image src="../../static/logo.png" mode=""></image> -->
								<image :src="item.cover"></image>
								<view class="product-list-content">
									<!-- 这里是产品的详细介绍 -->
									<!-- 标题 -->
									<view class="product-list-title">
										{{item.title}}
									</view>
									<!-- 文本内容 -->
									<text class="instruct">
										{{item.desc}}

									</text>
									<view class="price">
										<text class="curentPrice">{{item.pprice}}</text>
										<text class="oldPrice">{{item.oprice}}</text>
									</view>
								</view>
							</view>


						</view>
						<!-- 在这里进行下面的显示 -->
						<view style="line-height: 60rpx;margin-bottom: 50rpx;">
							<text v-if="flag">测试一下</text>
						</view>

					</scroll-view>
				</swiper-item>


				<!-- 第二个页面 -->
				<swiper-item>
					<scroll-view scroll-y="true" class="scr" refresher-enabled="true" :refresher-triggered="triggered"
						:refresher-threshold="50" @refresherpulling="onpulling" @refresherrestore="onRestore"
						@refresherrefresh="onRefresh" @scrolltolower="onBottom">
						<!-- 这里面是小的 -->
						<swiper class="uni-swiper-banner" :indicator-dots="true" :autoplay="true" :interval="3000"
							:duration="1000" circular="true">
							<swiper-item v-for="(item,index) in banner2" :key="index">
								<view class="swiper-item">
									<image :src="item.src"></image>
									<!-- 	<view class="">
											{{item.data[index].src}}
										</view> -->
								</view>
							</swiper-item>

						</swiper>

						<!-- 这里第二部分 -->
						<!-- 下面的列表 -->
						<view class="sort-list">
							<view class="sort-list-icon" v-for="(item,index) in sortList2" :key="index">
								<!-- 图片和文字 -->
								<image :src="item.src"></image>
								<text>{{item.text}}</text>
							</view>

						</view>



						<!-- 接下来就全是图片了 -->
						<view class="product-list">
							<view class="product-list-m" v-for="(item,index) in productList2" :key="index">
								<!-- <image src="../../static/logo.png" mode=""></image> -->
								<image :src="item.cover"></image>
								<view class="product-list-content">
									<!-- 这里是产品的详细介绍 -->
									<!-- 标题 -->
									<view class="product-list-title">
										{{item.title}}
									</view>
									<!-- 文本内容 -->
									<text class="instruct">
										{{item.desc}}

									</text>
									<view class="price">
										<text class="curentPrice">{{item.pprice}}</text>
										<text class="oldPrice">{{item.oprice}}</text>
									</view>
								</view>
							</view>


						</view>
						<!-- 在这里进行下面的显示 -->
						<view style="line-height: 60rpx;margin-bottom: 50rpx;">
							<text v-if="flag">测试一下</text>
						</view>

					</scroll-view>
				</swiper-item>


			</swiper>









		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 首页导航栏
				categoryList: [],
				// index判断下面和上面是否相同
				index: 0,
				// 中间的轮播图
				banner: [],
				banner2: [],
				// 下面的分类
				sortList: [],
				sortList2: [],
				// 中间图片的数组
				imageList: [],

				// 下面所有产品的信息
				productList: [],
				productList2: [],
				// 绑定下拉刷新的样式
				triggered: false,
				isLoading: true,
				// // 接收内容的数组
				listCover: [],
				// 定义是否加载到底部
				flag: true,
				// 定义空数组
				arr:[]

			}
		},
		onLoad() {
			
				
			
			uni.request({
				url: `http://ceshi3.dishait.cn/api/index_category/data`,
				success: (res) => {
					// console.log(res.data)
					// 首页导航栏
					this.categoryList = res.data.data.category
					// console.log(this.categoryList)
					// 中间轮播图的数据
					this.banner = res.data.data.data[0].data
					// console.log(this.banner)
					this.sortList = res.data.data.data[1].data
					// console.log(this.sortList)
					this.imageList = res.data.data.data[2].data

					// console.log(res.data.data.data[2].data)
					// 下面所有的图片信息
					this.productList = res.data.data.data[4].data
					let obj=res.data.data.data[4].data
					for (let item in obj) {
							this.listCover.push(obj[item])
					}
					
				
					
					
				}
			})
			
		
			


		},
		// 下拉刷新
		onPullDownRefresh() {

		},
		mounted() {
			
		},
		
		methods: {
		
			
			reachBottom() {
				console.log("触发了")
			},
			onpulling() {
				console.log("下拉被触发")
				this.triggered = true; // 需要重置
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = false; // 需要重置
				console.log(this.triggered)
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},

			onBottom() {
				// 到底触发函数
				console.log("到底了")

				uni.showToast({
					title: '加载成功',
					duration: 1000
				});
				
					let arr3=[]
					for (let item in this.productList) {
							arr3.push(this.productList[item])
							
					}
					
					// console.log(arr3)
					console.log(this.listCover)
					
				let arr2=arr3.concat(this.listCover)
				// 已将数据获取
				
				// console.log(this.arr3)
				// console.log(arr2)
				// 然后怎么处理呢？
				
				this.productList=[...arr2]
				console.log(this.productList)
				
			
			},

			changeSort(e) {
				// 再滑动的时候触发
				console.log("改变不同页面的值")
				console.log(e)
				if (e.detail.current == 0) {
					// 从新请求
					let id = e.detail.current
					this.index = id
				} else if (e.detail.current == 1) {
					// 从新请求
					let id = e.detail.current
					this.index = id
					this.req(id)
					console.log(this.index)
				}

			},
			req(id) {
				let sortId = id
				// 出现一个问题，这个数据我想采用动态的但是没法获取
				// 原因这个直接就加载的时候就执行了，没等到我执行
				// 2
				uni.request({
					url: 'http://ceshi3.dishait.cn/api/index_category/2/data/1',
					// 		// 中间轮播图的数据
					success: (res) => {


						// this.banner2 = res.data.data

						// this.imageList2=res.data.data[2].data

						this.banner2 = res.data.data[0].data
						console.log(this.banner2)
						this.productList2 = res.data.data[2].data
						this.sortList2 = res.data.data[1].data
					}
				})

			},
			search() {
				console.log("点击输入框跳转搜索页面")
				uni.navigateTo({
					url: '../search/search',
					success(res) {

					}
				})



			},
		}
	}
</script>

<style>
	.uni-swiper-wrapper {
		/* 固定宽高 */
		width: 100%;
		height: 1300rpx;


	}

	.scr {
		width: 100%;
		height: 1300rpx;
	}

	/* 中间大的下拉 */
	.uni-swiper-slide {
		/* 固定宽高 */
		width: 100%;
		height: 100%;
	}




	#search-index {
		width: 100%;
		height: 100%;
	}

	.search {
		width: 100%;
		height: 66rpx;
		/* border: 1rpx solid #333333; */
		/* 使用弹性盒子 */
		display: flex;
		/* 两边留白 */
		justify-content: space-around;
		align-items: center;
		margin-top: 66rpx;


	}

	/* 调整图片的大小 */
	.search-icon image,
	.search-scan image {
		width: 66rpx;
		height: 66rpx;

	}

	,
	/* 将两个图标盒子设置一样大小 */
	.search-icon,
	.search-scan {
		width: 66rpx;
		height: 66rpx;

	}

	/* 调整搜索框并且将图标进行调整 */
	.search-input {
		width: 500rpx;
		height: 100%;
		border: none;
		background-color: #F7F7F7;
		color: #cccccc;
		/* 设置相对定位 */
		position: relative;
		padding-left: 60rpx;
		display: flex;
		align-items: center;

	}

	/* 调整图标 */
	.search-input image {
		width: 45rpx;
		height: 45rpx;
		/* 使用定位将图标放进去 */
		position: absolute;
		left: 10rpx;


	}

	.category {
		width: 100%;
		height: 80rpx;
		/* border: #333333 solid 1rpx; */
		padding-bottom: 10rpx;
		margin-top: 10rpx;
	}

	.category scroll-view .active {
		border-bottom: 6rpx solid #F46D01;
		color: #F46D01;
	}


	.category scroll-view {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		white-space: nowrap;


	}

	.category scroll-view .scroll-row-item {
		height: 100%;
		width: 130rpx;
		display: inline-block;
		display: inline-flex;
		align-items: center;
	}

	.uni-swiper-banner {
		width: 100%;
	}

	.uni-swiper-banner .swiper-item image {
		width: 100%;
		height: 350rpx;
	}

	.sort-list {
		/* 下面的列表玩意儿 */
		height: 290rpx;
		/* border: 1rpx solid #333333; */
		margin: 20rpx;
		box-sizing: border-box;
		font-size: 22rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
	}

	.sort-list-icon {
		padding: 20rpx;
		/* border: 1rpx solid #007AFF; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

	}

	.sort-list-icon image {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}

	.sort-list-icon text {
		display: block;

	}

	/* 中间两张图片的处理 */
	.image-list {
		width: 100%;
		height: 530rpx;
		border: 1rpx solid #4CD964;
	}

	.image-list .image-list-left {
		width: 50%;
		height: 100%;
		float: left;
	}

	.image-list .image-list-right {
		width: 50%;
		height: 100%;
		float: left;
	}

	.image-list .image-list-left image {
		width: 100%;
		height: 100%;
	}

	.image-list .image-list-right image {
		display: block;
		width: 100%;
		height: 50%;
	}

	/* 下面的产品图片和参数进行渲染 */
	.product-list {
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;

	}

	.product-list-title {
		padding: 10rpx 0rpx;
	}

	.product-list .product-list-m {
		width: 49%;
		height: 640rpx;
		font-size: 24rpx;
	}

	.product-list .product-list-m image {
		width: 100%;
		height: 60%;

	}

	.product-list-content {
		padding: 10rpx 20rpx 20rpx 20rpx;
	}

	.product-list .product-list-m .instruct {
		color: #ccc;
		padding: 10rpx 0rpx;

	}

	.product-list .product-list-m .curentPrice {
		color: #ff0000;
	}

	.product-list .product-list-m .oldPrice {
		color: #CCCCCC;
		text-decoration: line-through;
	}
</style>
